<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="account"
        placeholder="请输入卡号"
        style="width: 200px;margin-right: 20px"
        class="filter-item"
      />
      <el-select v-model="labelSelect" multiple placeholder="请选择标签" style="width: 400px;margin-right: 20px;margin-bottom: 10px;">
        <el-option
          v-for="item in labelList"
          :key="item.id"
          :label="item.labelName"
          :value="item.id"
        />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-bottom: 10px;" @click="search">
        {{ $t('table.search') }}
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-refresh"
        @click="reset"
      >
        重置
      </el-button>
    </div>
    <el-table
      :key="0"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="卡号" prop="gasAccount" />
      <el-table-column label="气表号" prop="meterNo" />
      <el-table-column label="标签">
        <template slot-scope="scope">
          <el-tag v-for="(item, i) in scope.row.labelIds" :key="i" style="margin: 5px" @click="delLabel(scope.row, item)">{{ labelName[item] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="地址">
        <template slot-scope="scope">
          <span>{{ `${scope.row.country.split('|')[1]} ${scope.row.city.split('|')[1]} ${scope.row.area.split('|')[1]} ${scope.row.address}` }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="open(scope.row)">添加标签</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="page"
      :limit.sync="limit"
      @pagination="getList"
    />

    <el-dialog
      title="添加标签"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-select v-model="selLabel" placeholder="请选择">
        <el-option
          v-for="item in labelList"
          :key="item.id"
          :label="item.labelName"
          :value="item.id"
          :disabled="!!~disabledLabel.indexOf(item.id)"
        />
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;selLabel = ''">取 消</el-button>
        <el-button type="primary" @click="labelAct(0)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import { fetchWxUserList, labelList, updateUserList } from '@/api/wx-front'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

    export default {
        components: {
            Pagination
        },

        data() {
            return {
                listLoading: true,
                list: [],
                account: '',
                page: 1,
                limit: 20,
                total: 0,
                labelList: [],
                dialogVisible: false,
                row: {},
                selLabel: '',
                labelName: {},
                labelSelect: [],
                disabledLabel: []
            }
        },

        methods: {
            async getList() {
                const { data: { total, list } } = await fetchWxUserList({
                    page: this.page,
                    limit: this.limit,
                    account: this.account,
                    labelIds: this.labelSelect.join(',')
                })

                this.list = list
                this.total = total
                this.listLoading = false
            },

            search() {
                if (this.account || this.labelSelect.length) {
                    this.getList()
                }
            },

            open(row) {
                this.row = row
                this.dialogVisible = true
                this.disabledLabel = row.labelIds || []
            },

            async labelAct(type) {
                if (type === 0) {
                    if (!this.selLabel) {
                        this.$message.warning('请选择标签')
                        return
                    }

                    this.row.labelIds = this.row.labelIds || []

                    this.row.labelIds.push(this.selLabel)

                    const { code } = await updateUserList({
                        labelIds: this.row.labelIds.join(','),
                        id: this.row.id
                    })

                    if (code === 200) {
                        this.$message.success('添加成功')
                        this.dialogVisible = false
                        this.selLabel = ''
                        this.row = {}
                        this.getList()
                    }
                }
            },

            async delLabel(row, labelId) {
                await this.$confirm('确定删除该标签?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })

                const arr = row.labelIds
                arr.splice(arr.indexOf(labelId), 1)

                const { code } = await updateUserList({
                    labelIds: arr.join(','),
                    id: row.id
                })

                if (code === 200) {
                    this.$message.success('删除成功')
                    this.getList()
                }
            },

            reset() {
                this.page = 1
                this.account = ''
                this.labelSelect = []
                this.getList()
            }
        },

        async mounted() {
            const { data: { total, list } } = await labelList({
                page: 1,
                limit: 100
            })

            this.labelList = list
            this.labelList.forEach(({ labelName, id }) => {
                this.labelName[id] = labelName
            })

            this.getList()
        }
    }
</script>

<style>
    .filter-container {
        display: flex;
    }
</style>
